<template>
  <div class="dljjc_box3_x" content-style="padding:0;">
    <!-- 玩家查刀组件 -->
    <component
      wd="900"
      :is="cfg.model"
      v-model:window_open="val.md_player_dao"
      :title="`成员出刀记录`"
    >
      <template #content>
        <component :is="comp.player_dao.comp" :val="val" :ct="ct" />
      </template>
    </component>

    <m_select :select="val.select" :click="ct.select_click" :qs="val.qs" :op="val.op">
      <template #sea>
        <n-input
          :style="`min-width: ${$cfg.mobile ? 8 : 10}rem`"
          :size="cfg.mobile ? 'small' : ''"
          placeholder="玩家名称 [确认键]"
          @input="ct.user_sea_key"
          @blur="ct.user_sea"
          @keyup="ct.user_sea"
        />
        <n-input
          :style="`min-width: ${$cfg.mobile ? 8 : 10}rem`"
          :size="cfg.mobile ? 'small' : ''"
          placeholder="公会名称 [确认键]"
          @input="ct.guild_sea_key"
          @blur="ct.guild_sea"
          @keyup="ct.guild_sea"
        />
      </template>
    </m_select>

    <!-- 数据列表 -->
    <n-pagination
      :page="Number(val.qs.page)"
      :on-update:page="ct.page"
      :page-count="val.maxlimit"
      :page-slot="val.pgs"
    />
    <br />
    <div class="top_div">
      <n-grid
        :y-gap="cfg.mobile == false ? 15 : 6"
        :x-gap="cfg.mobile == false ? 15 : 6"
        :cols="cfg.mobile == false ? parseInt(cfg.sswd / 300) : 2"
      >
        <template v-for="item in val.pt_data">
          <n-gi>
            <div class="gl-box top_div-box">
              <div class="top_raid-pa2">榜 {{ item.top }}</div>
              <div>
                <p class="_p1">{{ item.user }}</p>
                <p class="_p2">[公会] {{ item.guild_name }}</p>
                <p class="_p3">[总伤] {{ item.damage?.toLocaleString() }}</p>
                <n-button
                  style="position: absolute; right: 5px; bottom: 5px"
                  size="tiny"
                  @click="ct.player_dao(item.uid, val.qs.season, item.guild_id)"
                  >查刀</n-button
                >
              </div>
            </div>
          </n-gi>
        </template>
      </n-grid>
    </div>
    <br />
    <!-- 数据列表 -->
    <n-pagination
      :page="Number(val.qs.page)"
      :on-update:page="ct.page"
      :page-count="val.maxlimit"
      :page-slot="val.pgs"
    />
  </div>
</template>

<script>
//2024/07/09 猫燐
import { cfg } from "@/cfg/cfg.js";
import m_load from "@/comp/m_load.vue";
import m_select from "@/comp/m_select.vue";
import player_dao from "./team_rank/player_dao.vue";

export default {
  components: {
    m_load,
    m_select,
  },
  setup() {
    const comp = {
      player_dao: {
        comp: player_dao,
        mdname: "md_player_dao",
        text: {
          title: "玩家出刀记录",
        },
      },
    };

    let ct = reactive({});
    //名称搜索key
    ct.user_sea_key = (text) => {
      val.sea_user = text;
    };
    //公会搜索key
    ct.guild_sea_key = (text) => {
      val.sea_guild = text;
    };
    //名称搜索
    ct.user_sea = async (sea) => {
      let text = null;
      try {
        if (sea.type == "blur") {
          text = sea.target.value;
        } else {
          if (sea.type == "keyup") {
            if (sea.code != "Enter") {
              return;
            }
            text = sea.target.value;
          }
        }

        if (text.length <= 0) {
          val.sea_user = null;
          ct.select_click();
          return;
        }
        val.sea_user = text;
        val.qs.page = 1;
        ct.select_click();
        return true;
      } catch (error) {
        return false;
      }
    };
    //公会搜索
    ct.guild_sea = async (sea) => {
      let text = null;
      try {
        if (sea.type == "blur") {
          text = sea.target.value;
        } else {
          if (sea.type == "keyup") {
            if (sea.code != "Enter") {
              return;
            }
            text = sea.target.value;
          }
        }

        if (text.length <= 0) {
          val.sea_guild = null;
          ct.select_click();
          return;
        }
        val.sea_guild = text;
        val.qs.page = 1;
        ct.select_click();
        return true;
      } catch (error) {
        return false;
      }
    };
    //查刀
    ct.player_dao = async (uid, season, bid) => {
      val.md_player_dao = true;
      val.player_dao = {
        uid: uid,
        bid: bid,
        season: season,
      };
    };
    //公会成员排名
    ct.user_list = (item) => {
      val.guild_user_list = {
        name: item.name,
        guild_id: item.guild_id,
        season: val.qs.season,
      };
      val.md_guild_user_list = true;
    };

    //翻页
    ct.page = (page) => {
      val.qs.page = page;
      ct.select_click();
    };

    //下拉菜单赛季选择
    ct.select_click = async () => {
      try {
        val.show = true;
        val.loading_text = `[Loading] 读取公会数据中... ( ${val.sepint} / ${val.maxint} )`;
        const res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "get/auto/gf_damage_rank",
            type: "list",
            page: val.qs.page,
            season: val.qs.season,
            lv: val.qs.lv,
            sea_user: val.sea_user,
            sea_guild: val.sea_guild,
          },
        });
        const data = res.data;
        if (data.code == 0) {
          val.pt_data = data.data.data;
        } else {
          cfg.msg.error(data.msg);
          return;
        }
        val.maxlimit = data.data.maxlimit;
        val.op.lv = [
          {
            value: "all",
            label: "所有等级总伤",
          },
          {
            value: "94-100",
            label: "等级 94 - 等级 100",
          },
        ];
        for (let key in data.data.lv) {
          if (data.data.lv[key] < 94) {
            val.op.lv.push({
              value: data.data.lv[key],
              label: `等级 ${data.data.lv[key]}`,
            });
          }
        }

        val.show = false;
      } catch (error) {
        val.show = false;
        cfg.msg.error(error);
        return false;
      }
    };

    let val = reactive({
      pt_data: [],
      sepint: 0,
      coldw: cfg.mobile == true ? 250 : 250,
      pgwd: cfg.mobile == true ? 45 : 45,
      col: 1,
      colwd: 1,
      maxint: 1,
      maxlimit: 0,
      md_guild_user_list: false,
      show: true,
      loading_text: "加载中(text)",
      //选择菜单选中
      qs: {
        season: null,
        page: 1,
        lv: null,
      },
      //选择菜单列表
      op: {
        season: [],
        lv: [],
      },
    });

    val.select = [
      {
        tips: "选择赛季",
        val: "season",
        width: 15,
        mwidth: 10,
      },
      {
        tips: "指定等级",
        val: "lv",
        width: 12,
        mwidth: 9,
      },
    ];

    //初始化
    onMounted(async () => {
      val.sepint++;
      val.loading_text = `[Loading] 读取赛季信息中... ( ${val.sepint} / ${val.maxint} )`;
      await cfg.function.season_list();
      val.op.season = cfg.season.select;
      if (cfg.route.query.season != null) {
        val.qs.season = cfg.route.query.season;
      } else {
        val.qs.season = cfg.season.select[0].value;
      }
      await ct.select_click();
      val.qs.lv = val.op.lv[1].value;
      val.show = false;
      const layBodyElement = document.querySelector(".v2_body");
      cfg.sswd = layBodyElement.offsetWidth;
      val.col = parseInt(cfg.sswd / val.coldw);
      val.pgs = parseInt(cfg.sswd / val.pgwd);
    });

    watch(
      () => cfg.sswd,
      (newWidth, oldWidth) => {
        val.col = parseInt(cfg.sswd / val.coldw);
        val.pgs = parseInt(cfg.sswd / val.pgwd);
      }
    );

    return {
      cfg,
      val,
      ct,
      comp,
    };
  },
};
</script>
